<template>
  <div class="FcRadio">
    <el-radio-group v-bind="attrs" v-model="showValue">
      <el-radio v-for="(item, index) in options" :value="item[valueKey]" size="small">
        <span>{{ item[labelKey] }}</span>
      </el-radio>
    </el-radio-group>
  </div>
</template>
<script setup name="FcRadio">
import {isNotEmptyArray} from "@/views/flow/tool.js";
const attrs = useAttrs();
const emits = defineEmits(['update:modelValue']);
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  options: {
    type: Array,
    default: () => []
  },
  valueKey: {
    type: String,
    default: 'value'
  },
  labelKey: {
    type: String,
    default: 'label'
  }
});
const showValue = computed({
  get() {
    return isNotEmptyArray(props.modelValue) ? props.modelValue[0][props.valueKey] : undefined;
  },
  set(val) {
    const selectedItem = props.options.find(item => item[props.valueKey] === val);
    if (selectedItem) {
      emits('update:modelValue', [selectedItem]);
    }
  }
});
</script>
<style scoped lang="scss">
.FcRadio {
}
</style>
